<template>
  <div>
    <Panel style="padding: 20px;margin-bottom: 20px;min-height: 450px;">
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="16" >
          <el-image :src="course.course_img" class="covoer_image"></el-image>
        </el-col>
        <el-col :span="8" style="display: flex;flex-direction: column;">
          <div class="course_title">{{course.name}} </div>
          <div style="display: flex;">  
            <div v-if="course.minprice>=0" style="font-size:16px; color: #bcc8d5; display: inline-block;">{{course.students}} 人在学 </div>
            <div v-if="course.minprice>=0" style="font-size:16px; color: #bcc8d5; display: inline-block;margin-left: 30px;">{{course.chapter_section}} </div>
          </div>
          
          <p style="margin-top: 10px ;">满减券：</p>
          <div id="counpon">
            <div  style="display:flex;flex-wrap: wrap;" class="coupon" v-for="(coupon, index) in course.coupons" :key="index">
              满 {{coupon['totprice']}} 减 {{coupon['decprice']}}
            </div>
          </div>

          <div style="margin-top: 30px ;" v-if="course.course_type==false && course.minprice>=0"  >
            <span class="discount_price" >限时折扣：￥{{course.minprice}}元</span>
            <span class="original_price" >{{course.price}}</span>
          </div>
          
          <div v-if="course.minprice < 0" style="margin-top: 50px;">
            <el-button round class="button_rest" >{{course.chapter_section}}</el-button>
          </div>
          <el-row v-else style="margin-top: 50px;">
            <el-button round v-if="!course.pay" @click="buyAll(course.id)" class="button_all" >购买所有章节</el-button>
            <el-button round v-if="!haveAll && course.pay" @click="buyRest(course.id)" class="button_rest">购买剩余章节</el-button>
            <el-button round v-if="course.pay" @click="goPlay(course.id)" class="button_learn">去学习</el-button>
          </el-row>
         
        </el-col>
      </el-row>

      </Panel>
    
    <el-row :gutter="20">
      <el-col :span="16">
        <Panel  style="padding: 0 10px;min-height: 1000px; ">
          <el-button type="text" v-if="!(activeTab==0)" @click="change(0)" style="font-weight: 400; font-size: 20px; color: #252525;"> 课程介绍 </el-button>
          <el-button type="text" v-if="activeTab==0" @click="change(0)" style="font-weight: 400; font-size: 20px; color: tomato; "> 课程介绍 </el-button>
          <el-button type="text" v-if="!(activeTab==1)" @click="change(1)" style="font-weight: 400; font-size: 20px; color: #252525;"> 章节目录 </el-button>
          <el-button type="text" v-if="activeTab==1" @click="change(0)" style="font-weight: 400; font-size: 20px; color: tomato; "> 章节目录 </el-button>
          <el-divider></el-divider>
          <div v-show="activeTab==0">
            <v-md-preview :text="course.introduce"></v-md-preview>
          </div>
          <div v-if="activeTab==1"> 
            <el-collapse>
              <div v-for="(chapter, index) in course.chapter_set" :key="index">
                <el-collapse-item >
                  <template slot="title">
                    第 {{index+1}} 章 {{chapter.name}}
                    <el-button v-show="!chapter.ok && course.minprice>=0" @click="buyOne(chapter.id)"  class="chapter_buy"  >
                      购买单章
                    </el-button>
                    <el-button v-show="chapter.ok && course.minprice>=0" @click="goPlay(course.id, chapter.id)"  class="chapter_learn"  >
                      去学习
                    </el-button>
                  </template>
                  <div v-for="(section, index2) in chapter.section_set" :key="index2" class="section_item">
                    第 {{index2+1}} 节 {{section.name}}
                  </div>
                </el-collapse-item>
              </div>
            </el-collapse>

          </div>
        </Panel>
      </el-col>
      <el-col :span="8" v-if="loading===false">
        <Panel style="padding: 0 30px;">
            <p style="font-size: 18px; margin-bottom: 20px ">讲师介绍</p>
            <div style="display: flex; flex-direction: row; align-items: center;">
              <div>
                <el-avatar :size="80" :src="course.teacher.image" style="margin-right: 20px;"></el-avatar>
              </div>
              <div style="font-size: 16px;">
                <div>{{course.teacher.name}}</div>
                <div style="color: #818181;">{{course.teacher.brief}}</div>
              </div>
            </div>
            <div style="margin: 20px 0;">{{course.teacher.introduce}}</div>
        </Panel>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'

  export default {
    name: 'CourseDetail',
    data () {
      return {
        category: 0,
        loading: true,
        course: [],
        query: {},
        activeTab: 0,
        preorder: {},
        haveAll: false,
        chapter_learn: -1
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.query.course_id = this.$route.params.course_id
        this.getCourseDetail()
      },
      getCourseDetail () {
        api['getCourseDetail'](this.query.course_id).then((res) => {
          this.course = res.data.data
          this.loading = false
          var t = 1
          this.course.chapter_set.forEach((item) => {
            if (!item.ok) {
              t = 0
            }
            if (this.chapter_learn === -1) {
              this.chapter_learn = item.id
            }
          })
          if (t === 1) {
            this.haveAll = true
          }
          console.log(this.course)
        }).catch()
      },
      change (index) {
        this.activeTab = index
      },
      buyOne (chapter) {
        this.preorder = {
          goodsId: chapter,
          type: 'One'
        }
        const {href} = this.$router.resolve({
          name: 'preorder',
          query: this.preorder,
          params: this.course
        })
        window.open(href, '_blank')
        // this.$router.push({name: 'preorder', query: this.preorder, params: this.course})
      },
      buyAll (course) {
        this.preorder = {
          goodsId: course,
          type: 'All'
        }
        const {href} = this.$router.resolve({
          name: 'preorder',
          query: this.preorder,
          params: this.course
        })
        window.open(href, '_blank')
        // this.$router.push({name: 'preorder', query: this.preorder, params: this.course})
      },
      buyRest (course) {
        this.preorder = {
          goodsId: course,
          type: 'Rest'
        }
        const {href} = this.$router.resolve({
          name: 'preorder',
          query: this.preorder,
          params: this.course
        })
        window.open(href, '_blank')
        // this.$router.push({name: 'preorder', query: this.preorder, params: this.course})
      },
      goPlay (cid, pid = null) {
        if (pid) {
          this.chapter_learn = pid
        }
        this.$router.push({name: 'play', query: {course_id: cid, chapter_id: this.chapter_learn}})
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    }
  }
</script>



<style lang="less">
  .covoer_image {
    width: 100%;
  }

  .introduce_image {
    height: 100%;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 30px;
  }
  

  .discount_price{
    color: red;
    font-weight: 600;
    font-size: 22px;
  }

  .original_price{
    color: rgb(103, 107, 110);
    text-decoration: line-through;
  } 

  .coupon {
    float: left;
    padding: 5px;
    font-size: 14px;
    color: white;
    background-color: rgb(233, 121, 29);
    font-weight: 600;
    text-align: inherit;
    margin: 5px;
  }

  .button_all{
    font-size: 20px;
    padding: 18px; 
    background-color:tomato;
    color: white;
  }

  .button_rest {
    font-size: 20px;
    padding: 18px; 
    background-color:rgb(71, 120, 255);
    color: white;
  }
  .button_learn {
    font-size: 20px;
    padding: 18px; 
    background-color:rgb(68, 222, 101);
    color: white;
  }

  .section_item {
    padding:8px;
    font-size: 14px;
    margin: 5px;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    background-color: #f2f2f2;
  }
  
  .el-collapse-item__header{
    font-size: 16px;
    font-weight: 600;
  }

  .chapter_buy {
    position: absolute;
    right: 50px;
    padding: 8px;
    font-size: 10px;
    font-weight: 600;
    background-color:rgb(71, 120, 255);
    color: white;
  }

  .chapter_learn {
    position: absolute;
    right: 50px;
    padding: 8px;
    font-size: 10px;
    font-weight: 600;
    background-color:rgb(68, 222, 101);
    color: white;
  }
  
</style>
